<template>
  <div class="left-top-box">
    <group-card :title="title" type="left">
      <el-carousel
        class="my-swiper"
        :slides-per-view="1"
        :autoplay="true"
        :indicator-position="'none'"
      >
        <el-carousel-item v-for="(item,i) in useList" :key="i"> 
          <el-row :gutter="24">
            <el-col :span="9">
              <div class="info-box">
                <div class="label-box">{{ type === '1' ? '车名':'姓名'}}</div>
                <div class="value-box" v-html="item && item.name"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-box">
                <div class="label-box">证件编号</div>
                <div class="value-box" v-html="item && item.rfno"></div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="info-box">
                <div class="label-box">场馆名称</div>
                <div class="value-box" v-html="item && item.venueName"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-box">
                <div class="label-box">通行时间</div>
                <div class="value-box" v-html="item && item.regTime"></div>
              </div>
            </el-col>

            <el-col :span="24">
              <div class="info-box" v-if="item && item.avatar">
                <div class="label-box">通行图片</div>
                <div class="value-box">
                  <img class="pre-img" :class="`img-type-${type}`" :src="item.avatar" >
                </div>
              </div>
            </el-col>
          </el-row>
        </el-carousel-item> 

        
      </el-carousel>

     

    
    </group-card>
    <div class="zj-count-list-box" v-if="type !== '2'">
        <div class="zj-count-box">
          <div class="zj-icon icon-zj"></div>
          <div class="zj-num-info">
            <div class="zj-num">{{addCommaToNumber(certificateCount.count || 0)}}</div>
            <div class="zj-name">闸机通行总数</div>
          </div>
        </div>
        <!-- <div class="zj-count-box">
          <div class="zj-icon icon-rl"></div>
          <div class="zj-num-info">
            <div class="zj-num">{{addCommaToNumber(certificateCount.personCount || 0)}}</div>
            <div class="zj-name">立式识别通行总数</div>
          </div>
        </div>
        <div class="zj-count-box">
          <div class="zj-icon icon-cz"></div>
          <div class="zj-num-info">
            <div class="zj-num">{{addCommaToNumber(certificateCount.carCount || 0)}}</div>
            <div class="zj-name">车闸通行总数</div>
          </div>
        </div> -->
      </div>
  </div>
</template>

<script setup name="wokerList">
import { addCommaToNumber } from '@/utils'
import useAppStore from "@/store/modules/app";
import { storeToRefs } from "pinia";

const props = defineProps({
  title: String,
  type: {
    type: String,
    default: '1'
  },
  certificateCount: {
    type: Object,
    default: () => ({})
  }
});

const app = useAppStore()
const { zjUserList, zjCarList, zjID } = storeToRefs(app);

const useList = computed(() => ((props.type === '1' ? zjCarList.value : zjUserList.value) || []).filter(item => item.venueName === zjID.value))

onMounted(() => {
  console.log(props.type === '1' ? '车辆': '人员', zjID.value, useList.value)
})
</script>

<style lang="scss" scoped>
.left-top-box {

  height: 364px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  .my-swiper {
    width: 100%;
    height: 300px;
  }
  .info-box {
    padding-left: 18px;
    margin-top: 30px;
    margin-left: 0px;
    display: flex;

    .label-box {
      padding-left: 20px;
      position: relative;
      margin-right: 6px;
      white-space: nowrap;
      color: rgba($color: #fff, $alpha: .6);
      &::before {
        content: '·';
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translate(0%, -50%);
      }
      &::after {
        content: ':';
      }
    }
    .value-box {
      white-space: nowrap;
      .pre-img {
        margin-left: 6px;
        // width: 240px;
        &.img-type-1 {
          width: 300px;
        }

        &.img-type-2 {
          width: 118px;
        }

      }
    }
  }


  .zj-count-list-box {
    position: absolute;
    left: 100%;
    top: 10px;

    width: 190px;
    height: auto;

    .zj-count-box {
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      position: relative;
      &::before {
        content: '';
        background: rgba($color: #fff, $alpha: .15);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 3px;
        filter: blur(1px);
      }
    
      .zj-icon {
        width: 52px;
        height: 52px;
        margin-left: 10px;
        margin-right: 8px;
        background: no-repeat center/cover;

        &.icon-zj {
          background-image: url(@/assets/images/icon_zj.png);
        }
        &.icon-rl {
          background-image: url(@/assets/images/icon_rl.png);
        }
        &.icon-cz {
          background-image: url(@/assets/images/icon_cz.png);
        }
      }

      .zj-num-info {
        display: flex;
        justify-content: center;
        flex-direction: column;
        .zj-num {
          font-size: 20px;
          margin-bottom: 2px;
        }
        .zj-name {
          font-size: 14px;
        }
      }
      color: #fff;
    }
  }
}
</style>
